HTML - Alinhamento de Imagem na página HTML

O objetivo desta página e mostrar como alinhar imagens numa página web de todas as maneiras, quando ela está sozinha ou acompanhado de elementos de mesma natureza (imagens.).

As tags e parâmetros tem uma 'afinidade' embutida nelas. Uma tag ou parâmetro com afinidade para texto ( como text-align ) afetaria uma tag de imagem ? Mesmo quando a tag texto for a container ( pai - quando a tag imagem esta dentro da tag texto) da tag imagem ?

Se você deseja ver o documento que trato do alinhamento de textos na página HTML Clique aqui

Todos sabemos que uma coisa é alinhar uma imagem numa página HTML outra muito diferente é fazer com que essa imagem fique bonita como uma opção de um menu no topo de uma página ou acompanhada de outras imagens de tamanho diferente.

Não usaremos recursos 'externos' ao browser como grid do bootstrap nem de nenhum outro framework. Faremos sem ajuda de nada além dos recursos mais simples do browser e o mais simples possível da css e iremos até os recursos mais sofisticados como estilo flex.

Se você desenvolve apps web sabe que o problema não é só alinhar as imagens mas sim compor um visual onde essas imagens fiquem harmônicas, com uma boa composição de cores e mesmo quando queremos usar elementos heterogêneos para destacar um item, que ele não 'destoe' tanto da página que fique feio ou mesmo uma aberração dentro da página. E não se esqueça que muitas vezes, o posicionamento de um elemento acaba interferindo no outro e o tamanho da página é uma briga constante com o design.

Não deixaremos os detalhes mais importantes de fora como quando o documento é responsivo...algumas quebras são desastrosas se não forem trabalhadas corretamente. O que fica bonito numa tela grande muitas vezes fica ilegível numa tela do celular. Um alinhamento que é quebrado ao reduzir a tela fica muito ruim muitas vezes.

Pelo html a imagem item inline, ou seja, é exibido na mesma linha sempre que é possível e o espaço que ele ocupa é 'alocado' dinamicamente definido pelo browser no momento de renderização do objeto, ou seja, ocupa somente o espaço necessário para ser exibido. Se a imagem é pequena ela ocupará um espaço bem menor na página de quando a imagem é grande. Note que o simples tamanho da imagem pode destacar um ponto onde a empresa desejou que chamasse a atenção do cliente ou que focasse o interesse do cliente naquele ponto como uma promoção oi coisa parecida.

Normalmente a quebra de imagens é feita da mesma maneira como é feita nos textos... o que cabe na linha é exibido na linha e se a imagem não cabe na linha será exibida na linha de baixo .

Outro detalhe, se na mesma linha eu exibo 2 imagens com tamanhos muito diferentes...o que vai acontecer ? ...haverá um espaço enorme entre a imagem menor e a maior já que o espaçamento será ditado pela maior imagem. O x da questão é fazer com que essa 'disparidade' não fique feia no contexto da página.

Para sua informação o browser sabe a largura da tela, se a imagem cabe ou não na linha corrente. São recursos simples que ele utiliza para fazer o trabalho de exibição da página html da melhor maneira possível.

Irei utilizar umas duas imagens no máximo neste documento. Uma pequena e repetirei a mesma imagem para demonstrar o posicionamento da mesma ou uma imagem grande e uma pequena demonstrando opções de posicionamento. Dependendo do leiaute da página uma maneira fica melhor que a outra.

Imagem comum

Aqui temos um exemplo de uma imagem comum sendo exibido pelo html: Como ele está cercado por tags parágrafo(p) ele é exibido em uma nova linha após a tab </p>

Fonte:
<img src="../imagens/img_white_flower.jpg" />

Vimos que o texto está alinhado à esquerda porque o browser renderiza imagems como renderiza textos da esquerda para a direita.

Duas Imagens comuns

Aqui temos um exemplo de mais de uma imagem comum sendo exibido pelo html:

Fonte:
<img src="../imagens/img_white_flower.jpg" /> <img src="../imagens/img_white_flower.jpg" />

Com isto sabemos que o elemento imagem no html é do tipo inline ( em linha ) ...se tiver n imagens seguidas elas serão exibidas na mesma linha.

Uma Imagem comum dentro de uma tag span

A tag imagem é em linha mas pode outra tag em linha alterar algo nela ? Vejamos:

Ficou ridiculo mas como o fim é instrucional vale. A tag span parece ser feita para textos...ao colocar o estilo style="background-color:red;" nada se alterou mas quando eu coloquei no estilo "padding:10px;" foi colocado 2 abas vermelhas, não do tamanho da imagem ( como esperávamos ) mas sim como se fosse um texto. Por isso eu disse que a tag span tem uma afinidade com textos poque não respeitou o tamanho da imagem.

Fonte:
<span style="background-color:red;padding:10px;">
<img src="../imagens/img_white_flower.jpg" />
</span>

tag center

A tag center também foi feita para texto e consegue alinhar o texto ao centro transformando a tag texto de em linha para block, ou seja, o texto ocupará toda a linha. Mas o que acontece ao colocar a imagem dentro da tag center ?

Funcionou...a imagem foi centralizada...esse é um dos males do html...tudo que é velho e não deve ser mais usado funciona melhor que os recursos mais novos criados para substituir as tags e parâmetros mais antigos.

Fonte:
<center style="background-color:pink;">
<img src="../imagens/img_white_flower.jpg" />
</center>

E agora faremos um teste...colocando uma imagem texto comum, uma segunda dentro da tag center e outra imagem comum. Pela lógica a primeira imagem deve ser exibida, a segunda deve ser exibida na linha seguinte e sozinha e a terceira deverá ser exibida na linha seguinte.

Fico contente em acertar de vez em quando...mas apanho muito ainda.

Fonte:
<span style="background-color:pink;">
            <img src="../imagens/img_white_flower.jpg" />
            <center style="background-color:lightgreen;"><img src="../imagens/img_white_flower.jpg" /></center>
            <img src="../imagens/img_white_flower.jpg" />
</span>

O estilo text-align:center/left/right funciona com imagens ?

Abaixo temos 3 tags divs com os estilos text-align como center(centro),left(esquerda) e right(direita).

Surpreendentemente o estilo text-align funciona com imagens, provavelmente porque tanto a imagem como o texto são tags em linha, mas cometem o mesmo erro da tag center...faz a tag img que é inline ( caberia muitas imagens na mesma linha ) virar uma tag em bloco ( que coloca só uma imagem por linha). Resolve o problema de alinhamento mas cria um outro talvez maior.

Fonte: :
<div style="text-align:center;background-color:pink"><img src="../imagens/img_white_flower.jpg" /></div>
<div style="text-align:left;background-color:lightpink"><img src="../imagens/img_white_flower.jpg" /></div>
<div style="text-align:right;background-color:lightgreen"><img src="../imagens/img_white_flower.jpg" /></div>

Se você trocar a tag div (que é bloco) pela tag span (que é inline), por exemplo, vai observar que o elemento acima não funciona, ou seja, diferentemente da tag center que impõe o estilo bloco nos seus elementos internos o estilo 'text-align' não é uma tag html mas sim um estilo e por esse motivo não consegue 'impor' um estilo bloco na linha e por esse motivo o estilo text-align só funcionará em tags tipo bloco. Veja abaixo como fica:

Fonte: :
<span style="text-align:center;background-color:pink"><img src="../imagens/img_white_flower.jpg" /></span>
<span style="text-align:left;background-color:lightpink"><img src="../imagens/img_white_flower.jpg" /></span>
<span style="text-align:right;background-color:lightgreen"><img src="../imagens/img_white_flower.jpg" /></span>

Alinhando imagens com tags div e estilo float:left/right

O estilo Float permite alinhar a imagem à esquerda ou à direita da página. Muito legal deste estilo é que a tag fica 'colada' ao alinhamento, ou seja, se eu tenho um elemento alinhado à direita pela tag float ele fica 'colado' à margem direita mesmo que você diminua a largura do browser e outras coisas colidam com ele...aí o browser coloca as coisas que 'iriam colidir' na linha seguinte e evita a colisão quando possível.

Style Float funcionou mas não existe elemento central, apenas alinhar a direita ou a esquerda e exige o estilo style=clear:both nas tags seguintes senão o espaço do float não seria computado e outras tags poderiam sobrescrever seu conteúdo.

Se você colocar mais itens com o style=float alinhando a direita e a esquerda eles serão empilhados como no exemplo abaixo

Fonte:
<div style="float:left;background-color:pink;"><img src="../imagens/img_white_flower.jpg" /></div>
        <div style="float: right; background-color: pink;"><img src="../imagens/img_white_flower.jpg" /></div>
        <div style="float:left;background-color:pink;"><img src="../imagens/img_white_flower.jpg" /></div>
        <div style="float: right; background-color: pink;"><img src="../imagens/img_white_flower.jpg" /></div>
<br style="clear:both" />

Agora faremos uma experiência...vamos formatar uma largura específica para o elemento 1 bem maior do que ele precisa para ver se funciona:

Muito bom...funcionou...coloquei o tamanho da primeira imagem como 300 pixels e o outro elemento foi alinhado longe do primeiro elemento.

Fonte:
<div style="float:left;background-color:pink;width:300px; "><img src="../imagens/img_white_flower.jpg" /></div>
        <div style="float: right; background-color: pink;"><img src="../imagens/img_white_flower.jpg" /></div>
        <div style="float:left;background-color:pink;"><img src="../imagens/img_white_flower.jpg" /></div>
        <div style="float: right; background-color: pink;"><img src="../imagens/img_white_flower.jpg" /></div>
<br style="clear:both" />

O mais legal é que o estilo float funciona com site responsivo. Reduza a largura da tela e você verá que a tag alinhada a direita continuará sendo alinhada a direita da tela independentemente da largura da tela / browser.

Contudo não se esqueça do style="clear:both" no elemento logo após o float porque ele pede ao browser que veja o espaço ocupado pelo style float e ai os próximos elementos não ficarão encavalados ( renderizados juntos, no mesmo espaço ) dos elementos com estilo float.

Usando o estilo 'align-content:' dentro de uma div com os styles:

Não funcionam o alinhamento imagem dentro de uma tag div pelo estilo align-content, align-items, align-self, align-content. Veja o teste abaixo.

Fonte:
<div style="align-content:center;background-color: pink;"><img src="../imagens/img_white_flower.jpg" /></div>
<div style="align-items:center;background-color: pink;"><img src="../imagens/img_white_flower.jpg" /></div>
<div style="align-self:center;background-color: pink;"><img src="../imagens/img_white_flower.jpg" /></div>
<div style="align-content:center;background-color: pink;"><img src="../imagens/img_white_flower.jpg" /></div>

Texto dentro de uma div - Utilizando o parametro align para alinhar uma imagem

Como uma div é uma tag bloco e ocupa uma linha inteira o browser saberá como alinhar cada um desses elementos.

Note que é um parâmetro da tag div chamado align e não o text-align que utilizamos no primeiro exemplo desta página.

Funciona mas tem o problema de que cada div é exibida em uma linha separada, ou seja, novamente uma tag que deveria ser em linha foi transformada como em bloco.

Fonte:
<div align="left" style="background-color:pink;"><img src="../imagens/img_white_flower.jpg" /></div>
<div align="center" style="background-color:pink;"><img src="../imagens/img_white_flower.jpg" /></div>
<div align="right" style="background-color:pink;"><img src="../imagens/img_white_flower.jpg" /></div>

Convertendo a imagem de em linha para bloco

Como todos os posicionamentos funcionaram transformando a tag imagem que é em linha para em bloco e se a gente utilizasse style="display:inline-block;width:33%" e align="right/center/left" na div que contém imagem. Funciona ?

Nota : Funcionou perfeitamente para 3 itens e funcionaria para 4,5.
Utilize este método de preferência para alinhar imagens na página.

Fonte:
<div style="display: inline-block; width: 33%; background-color: pink;" align="left"><img src="../imagens/img_white_flower.jpg" /></div>
<div style="display: inline-block; width: 33%; background-color: pink;" align="center"><img src="../imagens/img_white_flower.jpg" /></div>
<div style="display: inline-block; width: 33%; background-color: pink;" align="right"><img src="../imagens/img_white_flower.jpg" /></div>

Cuidado com o a largura das colunas em porcentagem

Sabemos que a tela tem 100% da largura por default. Sendo assim vou criar 5 colunas com uma largura de 20% para cada div e veja só o resultado:

Pela lógica as 5 colunas com 20% cada deveriam ocupar 100% da tela mas como o html não limita o tamanho da imagem a não ser que seja solicitado, acabou 'estourando' o espaço horizontal da linha e a quinta imagem foi colocada na linha inferior.

Fonte:
<div style="display:inline-block;width:20%; background-color:pink;"><img src="../imagens/img_white_flower.jpg" /></div>
<div style="display:inline-block;width:20%; background-color:pink;"><img src="../imagens/img_white_flower.jpg" /></div>
<div style="display:inline-block;width:20%; background-color:pink;"><img src="../imagens/img_white_flower.jpg" /></div>
<div style="display:inline-block;width:20%; background-color:pink;"><img src="../imagens/img_white_flower.jpg" /></div>
<div style="display:inline-block;width:20%; background-color:pink;"><img src="../imagens/img_white_flower.jpg" /></div>

Vamos tentar reduzindo a largura da última coluna, de 20% para 18%:

O que fiz foi na última div colocar um tamanho de 18% ao invés de 20%. Isto corrigiu o erro causado pelo container do bootstrap.

Fazendo outro teste...criando uma linha com 5 colunas texto mas usando o bootstrap

Falei que não ia usar o bootstrap mas acredito que todos bons programadores devem conhecer o básico dele. E o grid é um dos elementos do bootstrap que todos devem conhecer.

Se você não conhece o bootstrap ele divide a linha em partes iguais, se tiver uma coluna ocupa todo o espaço, se tiver 2 dados na linha divide em 50% e 50% para cada...se for 3...33% e assim por diante, automaticamente. E o mais legal é que o que antigamente no asp clássico era feito com tabelas hoje é feito com puro css, todas as colunas terão sempre o mesmo tamanho não importa seu conteúdo. Veja o exemplo abaixo:

Fonte:
<div class="row">
            <div class="col-sm" style="background-color:pink;">
                <img src="../imagens/img_white_flower.jpg" />
            </div>
            <div class="col-sm" style="background-color:pink;">
                <img src="../imagens/img_white_flower.jpg" />
            </div>
            <div class="col-sm" style="background-color:pink;">
                <img src="../imagens/img_white_flower.jpg" />
            </div>
            <div class="col-sm" style="background-color:pink;">
                <img src="../imagens/img_white_flower.jpg" />
            </div>
            <div class="col-sm" style="background-color:pink;">
                <img src="../imagens/img_white_flower.jpg" />
            </div>
</div>

Ocorreu o mesmo erro...vou alterar a largura da última imagem para 18%

Nem sequer fica um espacinho entre as colunas. Se quiser que fique use a css padding ou margin para criar o isolamento.